<template>
  <div>
    <el-dialog
      :title="'导入给油'"
      :close-on-click-modal="false"
       v-dialogDrag
      :visible.sync="visible">
      <el-form :inline="true" v-show="isSearchCollapse" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
            <!-- 搜索框-->
         <el-form-item prop="basicdataEquipmentName" label="设备名称">
                <el-input v-model="searchForm.basicdataEquipmentName" placeholder="填写设备名称" clearable></el-input>
         </el-form-item>
        <!-- <el-form-item prop="basicdataPart">
                <el-input size="small" v-model="searchForm.basicdataPart" placeholder="装置(部件)名称" clearable></el-input>
         </el-form-item>
         <el-form-item prop="basicdataOiling">
                <el-input size="small" v-model="searchForm.basicdataOiling" placeholder="润滑方式" clearable></el-input>
         </el-form-item> -->
         <el-form-item label="部件名称" prop="basicdataPart" :rules="[]" >
          <el-select v-model="searchForm.basicdataPart" placeholder="请选择部件名称" @change="handleChangeUnits">
           <el-option v-for="item in partsData" :key="item.id" :label="'[' + item.code + ']' + item.name" :value="item.id" ref="units"></el-option>
          </el-select>
         </el-form-item>
          <el-form-item prop="oilName" label="给油脂部位">
                 <el-input v-model="searchForm.oilName" placeholder="请填写给油脂部位" clearable></el-input>
                 <!-- <el-select v-model="component" placeholder="请选择内容" @change="handleChangePart" v-loading = 'isTwoDropDownBoxLoading' :disabled="isTwoDropDownBoxLoading">
                   <el-option v-for="item in componentData" :key="item.fileCode" :label= "'[' + item.fileCode + ']' + item.fileDevicename" :value="item.fileCode" ref="part" ></el-option>
                 </el-select> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refreshList()" >查询</el-button>
            <el-button @click="resetSearch()" >重置</el-button>
          </el-form-item>
      </el-form>
        <!-- 导入导出-->
      <!-- <el-form :inline="true" v-show="isImportCollapse"  class="query-form" ref="importForm">
         <el-form-item>
          <el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
         </el-form-item>
         <el-form-item prop="loginName">
            <el-upload
              class="upload-demo"
              :action="`${this.$http.BASE_URL}/basicdata/standard/basicdataGiveOilMainForm/import`"
              :on-success="uploadSuccess"
               :show-file-list="true">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
            </el-upload>
        </el-form-item>
      </el-form> -->
      <el-row>
        <!-- <el-button v-if="hasPermission('basicdata:standard:basicdataGiveOilMainForm:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addIn()">导入</el-button> -->
        <!-- <el-button v-if="hasPermission('basicdata:standard:basicdataGiveOilMainForm:edit')" type="warning" size="small" icon="el-icon-edit-outline" @click="edit()"
         :disabled="dataListSelections.length != 1" plain>修改</el-button> -->
        <!-- <el-button v-if="hasPermission('basicdata:standard:basicdataGiveOilMainForm:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()"
                  :disabled="dataListSelections.length <= 0" plain>删除
        </el-button> -->
        <!-- <el-button-group class="pull-right">
            <el-button
              type="default"
              size="small"
              icon="el-icon-search"
              @click="isSearchCollapse = !isSearchCollapse, isImportCollapse=false">
            </el-button>
            <el-button v-if="hasPermission('basicdata:standard:basicdataGiveOilMainForm:import')" type="default" size="small" icon="el-icon-upload2" title="导入" @click="isImportCollapse = !isImportCollapse, isSearchCollapse=false"></el-button>
            <el-button v-if="hasPermission('basicdata:standard:basicdataGiveOilMainForm:export')" type="default" size="small" icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
            <el-button
              type="default"
              size="small"
              icon="el-icon-refresh"
              @click="refreshList">
            </el-button>
        </el-button-group> -->
      </el-row>
    <el-table
      :data="dataList"
      border
      size="medium"
      @selection-change="selectionChangeHandle"
      @sort-change="sortChangeHandle"
      v-loading="loading"
      class="table"
      >
      <!-- <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column> -->
    <el-table-column
        prop="basicdataEquipmentName"
        show-overflow-tooltip
        sortable="custom"
        label="设备名称"
        fixed="left"
        width="110px"
        >
            <template slot-scope="scope">
             <span >{{scope.row.basicdataEquipmentName}}</span>
            </template>
      </el-table-column>
    <el-table-column
        prop="basicdataPart"
        show-overflow-tooltip
        sortable="custom"
        label="部件名称"
        width="240px">
        <template slot-scope="scope">
         <span >{{ '[' + scope.row.partDevice.fileCode + ']' + scope.row.partDevice.fileDevicename}}</span>
        </template>
      </el-table-column>
    <el-table-column
        prop="oilName"
        show-overflow-tooltip
        sortable="custom"
        label="给油脂部位"
        width="120px">
      </el-table-column>
    <el-table-column
        prop="basicdataOiling"
        show-overflow-tooltip
        sortable="custom"
        label="润滑方式"
        width="220px">
      </el-table-column>
    <el-table-column
        prop="basicdataMarkCoding"
        show-overflow-tooltip
        sortable="custom"
        label="油脂牌号"
        width="110px">
      </el-table-column>
    <el-table-column
        prop="basicdataIndex"
        show-overflow-tooltip
        sortable="custom"
        label="润滑点数"
        align="center"
        width="110px">
      </el-table-column>
      <el-table-column label="给油脂标准" align="center">
   <el-table-column
        prop="basicdataOil"
        show-overflow-tooltip
        sortable="custom"
        label="油量">
      </el-table-column>
    <el-table-column
        prop="basicdataPeriod"
        show-overflow-tooltip
        sortable="custom"
        label="周期">
      </el-table-column>
       </el-table-column>
       <el-table-column label="更换油脂标准" align="center">
    <el-table-column
        prop="basicdataOilMeasure"
        show-overflow-tooltip
        sortable="custom"
        label="油量">
      </el-table-column>
    <el-table-column
        prop="basicdataCircle"
        show-overflow-tooltip
        sortable="custom"
        label="周期">
      </el-table-column>
      </el-table-column>
    <el-table-column
        prop="basicdataCheck"
        show-overflow-tooltip
        sortable="custom"
        label="分工">
      </el-table-column>
      <el-table-column label="给油脂部位" align="center">
   <el-table-column
        prop="basicdataFixname"
        show-overflow-tooltip
        sortable="custom"
        min-width="110px"
        label="责任人"
        align="center">
      </el-table-column>
      </el-table-column>
      <el-table-column label="更换给油脂部位" align="center">
   <el-table-column
        prop="basicdataPostname"
        show-overflow-tooltip
        sortable="custom"
        label="责任人"
        width="150px"
        align="center">
      </el-table-column>
       </el-table-column>
    <el-table-column
        prop="remarks"
        show-overflow-tooltip
        sortable="custom"
        label="备注信息"
        width="110px">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        fixed="right"
        width="170"
        label="操作">
        <template  slot-scope="scope">
          <el-button type="text" icon="el-icon-view" size="small" @click="sure(scope.row.id)">确认</el-button>
<!--          <el-button v-if="hasPermission('basicdata:standard:basicdataGiveOilMainForm:view')" type="text" icon="el-icon-view" size="small" @click="view(scope.row.id)">查看</el-button>
          <el-button v-if="hasPermission('basicdata:standard:basicdataGiveOilMainForm:edit')" type="text" icon="el-icon-edit" size="small" @click="edit(scope.row.id)">修改</el-button>
          <el-button v-if="hasPermission('basicdata:standard:basicdataGiveOilMainForm:del')" type="text"  icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      background
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
    <BasicdataGiveOilMainFormForm  ref="basicdataGiveOilMainFormForm" @refreshDataList="refreshList"></BasicdataGiveOilMainFormForm>
    <BasicdataGiveOilMainFormListForm  ref="basicdataGiveOilMainFormListForm" @refreshDataList="refreshList"></BasicdataGiveOilMainFormListForm>
  <span>
    <el-button @click="close()">关闭</el-button>
  </span>
  </el-dialog>
  </div>
</template>

<script>
  import BasicdataGiveOilMainFormForm from './BasicdataGiveOilMainFormForm'
  import BasicdataGiveOilMainFormListForm from './BasicdataGiveOilMainFormListForm'
  export default {
    data () {
      return {
        searchForm: {
          partDevice: {
            id: '', // 当前树节点的设备id
            code: '',
            name: '', // 设备名称
            level: '',  // 设备层级
            parents: [], // 设备的所有祖先，第一个为根节点，如果当前节点为根节点，则parents.length===0
            fileCode: '', // 传回的设备编码
            fileDevicename: '' // 传回的设备名称
          },
          units: '', // 部件名称id数据
          part: '', // 给油脂部位数据
          basicdataEquipmentName: '', // 设备名称数据
          basicdataPart: '', // 列表部件名称
          basicdataUnit: '', // 列表给油脂部位
          basicdataOiling: '', // 列表润滑方式
          basicdataMarkCoding: '', // 油品牌号编码
          oilName: '' // 给油脂部位名称
        },
        visible: false,
        partsData: [], // 部件数据
        componentData: [], // 零件数据
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: '',
        dataListSelections: [],
        isSearchCollapse: true, // 列表搜索框是否显示
        isImportCollapse: false,
        loading: false,
        parts: '', // 首级下拉框prop
        component: '', // 子级下拉框prop
        isTwoDropDownBoxLoading: false, // 子级下拉框prop
        partDeviceId: ''
      }
    },
    watch: {
      'partDevice.id': {
        handler (newPartDeviceId, oldPartDeviceId) {
          this.searchForm.partDevice.id = newPartDeviceId
          this.getNextNode(newPartDeviceId)
        },
        immediate: true // 第一次绑定数据时就触发
      }
    },
    components: {
      BasicdataGiveOilMainFormForm,
      BasicdataGiveOilMainFormListForm
    },
    activated () {
      this.refreshList()
    },
    methods: {
      sure (id) {
        this.loading = true
        this.$http({
          url: '/basicdata/standard/basicdataGiveOilMainForm/GiveOill',
          method: 'get',
          params: {
            id: id,
            partdeviceId: this.partDeviceId
            }
        }).then(() => {
          this.visible = false
          this.$emit('refreshDataList')
          this.loading = false
        })
      },
      // 关闭
      close () {
        this.visible = false
      },
      // 弹出并赋值数据
      pop (partDeviceId) {
        this.visible = true
        console.log(partDeviceId)
        this.partDeviceId = partDeviceId
        this.getNextNode(partDeviceId)
        this.refreshList()
      },
      // 选中下拉框所返回的函数
      handleChangeUnits (val) {
      // 传进来的val是select组件选中的value值，也就是一个fruitEnName
        var obj = {}
        obj = this.partsData.find(function (item) {
          return item.fileCode === val
        })
        this.searchForm.basicdataPart = obj.fileDevicename
      // obj 就是被选中的那个对象，也就能拿到label值了。
      },
      // 获取下一层级节点
      // 需要传入想要获取下一级树的数据的父级id参数（比如传三级id此方法获取4级数据）
      getNextNode (presentNode) {
        this.$http({
          url: `/basicdata/basictree/partDeviceNode/nextLevelTreeData`,
          method: 'get',
          params: {
            id: presentNode
          }
        }).then(({ data }) => {
          this.partsData = data.data
        })
      },
      // 导入
      addIn () {
        this.$refs.basicdataGiveOilMainFormListForm.pop(this.searchForm.partDevice.id)
      },
      // 获取数据列表
      refreshList () {
        this.loading = true
        this.$http({
          url: '/basicdata/standard/basicdataGiveOilMainForm/list',
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            ...this.searchForm
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.dataList = data.page.list
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageNo = 1
        this.refreshList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageNo = val
        this.refreshList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },

    // 排序
      sortChangeHandle (obj) {
        if (obj.order === 'ascending') {
          this.orderBy = obj.prop + ' asc'
        } else if (obj.order === 'descending') {
          this.orderBy = obj.prop + ' desc'
        } else {
          this.orderBy = ''
        }
        this.refreshList()
      },
      // 新增
      add () {
        this.$refs.basicdataGiveOilMainFormForm.init('add', '', this.partDevice, 0)
      },
      // 修改
      edit (id) {
        id = id || this.dataListSelections.map(item => {
          return item.id
        })[0]
        this.$refs.basicdataGiveOilMainFormForm.init('edit', id, this.partDevice, 0)
      },
      // 查看
      view (id) {
        this.$refs.basicdataGiveOilMainFormForm.init('view', id, this.partDevice, 0)
      },
      // 删除
      del (id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm(`确定删除所选项吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          this.$http({
            url: '/basicdata/standard/basicdataGiveOilMainForm/delete',
            method: 'delete',
            params: {'ids': ids}
          }).then(({data}) => {
            if (data && data.success) {
              this.$message.success(data.msg)
              this.refreshList()
            }
            this.loading = false
          })
        })
      },
      // 导入成功
      uploadSuccess (res, file) {
        if (res.success) {
          this.$message.success({dangerouslyUseHTMLString: true,
            message: res.msg})
        } else {
          this.$message.error(res.msg)
        }
      },
      // 下载模板
      downloadTpl () {
        this.$utils.download('/basicdata/standard/basicdataGiveOilMainForm/import/template')
      },
      exportExcel () {
        this.$utils.download('/basicdata/standard/basicdataGiveOilMainForm/export')
      },
      resetSearch () {
        this.$refs.searchForm.resetFields()
        this.searchForm.basicdataPart = ''
        this.searchForm.oilName = ''
        this.searchForm.basicdataEquipmentName = ''
        this.refreshList()
      }
    }
  }
</script>
